<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="mini" @click="openEdit(row_id)">{{$t('table.edit')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" width="80%" top="2.5%">
      <el-form v-loading="loading" ref="formData" :model="formData.schedule_setting" :rules="rules" label-position="right" label-width="auto"
        size="mini">
        <el-card class="box-card">
          <div slot="header" style="height:10px">
            <span>{{$t('attendance.time_period_setting')}}</span>
          </div>
          <div style="display:flex">
            <el-form-item :label="$t('table.shift_name')" prop="name">
              <el-input label="right" style="width:200px" type="text" v-model="formData.schedule_setting.name">
              </el-input>
            </el-form-item>
            <el-button type="primary" size="small" style="margin-left:20px;height:32px" @click="addTimePeriod">{{$t('attendance.add_time_period')}}
            </el-button>
          </div>
          <div style="border:1px #eee solid;padding:10px" v-for="(item,index) in formData.period_setting" :key="index">
            <el-row type="flex">
              <el-col :span="6">{{$t('attendance.time_period')}}</el-col>
              <el-col :span="6">{{$t('attendance.check_start_time')}}</el-col>
              <el-col :span="6">{{$t('attendance.work_time')}}</el-col>
              <el-col :span="6">{{$t('attendance.off_work_time')}}</el-col>
              <el-col :span="6">{{$t('attendance.check_out_time')}}</el-col>
              <el-col :span="4"></el-col>
            </el-row>
            <el-row type="flex" v-if="update">

              <el-col :span="6">
                <el-form-item label="" prop="period_name" label-width="0">
                  <el-input label="right" style="width:100px" type="text" v-model="item.name" size="mini">
                  </el-input>
                </el-form-item>

              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm" v-model="item.start_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm" v-model="item.shift_start_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm" v-model="item.shift_end_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="6">
                <el-time-picker size="mini" value-format="HH:mm:ss" format="HH : mm " v-model="item.end_time" style="width:180px">
                </el-time-picker>
              </el-col>
              <el-col :span="4">
                <el-button type="danger" size="small" style="height:32px" @click="deleteTimePeriod(index)">{{$t('attendance.delete_time_period')}}
                </el-button>
              </el-col>
            </el-row>
            <el-row type="flex" v-if="update">
              <el-col :span="6" :offset="3">
                <el-checkbox :label="item.need_clock_on" :value="Boolean(item.need_clock_on)"
                  @change="item.need_clock_on == 1 ? item.need_clock_on=0:item.need_clock_on=1">{{$t('attendance.need_clock_on')}}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox :label="item.need_clock_off" :value="Boolean(item.need_clock_off)"
                  @change="item.need_clock_off == 1 ? item.need_clock_off=0:item.need_clock_off=1">{{$t('attendance.need_clock_off')}}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox :label="item.late_log" :value="Boolean(item.late_log)" @change="item.late_log == 1 ? item.late_log=0:item.late_log=1">
                  {{$t('attendance.late_log')}}</el-checkbox>
              </el-col>
              <el-col :span="6">
                <el-checkbox :label="item.leave_early_log" :value="Boolean(item.leave_early_log)"
                  @change="item.leave_early_log == 1 ? item.leave_early_log=0:item.leave_early_log=1">{{$t('attendance.leave_early_log')}}
                </el-checkbox>
              </el-col>
              <el-col :span="6">
                {{$t('attendance.plan_worktime')}} : <el-input-number size="mini" v-model="item.plan_time" controls-position="right" :min="0"
                  style="max-width:100px"></el-input-number>{{$t('attendance.min')}}
              </el-col>
            </el-row>
          </div>
        </el-card>
        <!-- <el-card class="box-card">
          <div slot="header" style="height:10px">
            <span>{{$t('attendance.attendance_setting')}}</span>
          </div>
          <div align="center">
            <div style="margin-bottom:10px">
              {{$t('attendance.late_minute')}}<el-input-number size="mini" v-model="formData.schedule_setting.late_minutes" controls-position="right"
                :min="0" style="max-width:100px"></el-input-number>{{$t('attendance.min')}}
            </div>
            <div>
              {{$t('attendance.leave_early_minute')}}<el-input-number size="mini" v-model="formData.schedule_setting.early_minutes"
                controls-position="right" :min="0" style="max-width:100px"></el-input-number>{{$t('attendance.min')}}
            </div>
          </div>
        </el-card> -->
        <el-card class="box-card">
          <div slot="header" style="height:10px">
            <span>{{$t('attendance.week_setting')}}</span>
          </div>
          <div>
            <!-- <el-row type="flex" justify="center">
              <el-col :span="3">{{$t('attendance.sun')}}</el-col>
              <el-col :span="3">{{$t('attendance.mon')}}</el-col>
              <el-col :span="3">{{$t('attendance.tue')}}</el-col>
              <el-col :span="3">{{$t('attendance.wed')}}</el-col>
              <el-col :span="3">{{$t('attendance.thur')}}</el-col>
              <el-col :span="3">{{$t('attendance.fir')}}</el-col>
              <el-col :span="3">{{$t('attendance.sat')}}</el-col>
            </el-row> -->
            <el-row type="flex" justify="center">
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Sunday" :value="Boolean(formData.week_setting.Sunday)"
                      @change="formData.week_setting.Sunday == 1 ? formData.week_setting.Sunday=0:formData.week_setting.Sunday=1">
                      {{$t('attendance.sun')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="sunday_pm" :value="Boolean(formData.week_setting.sunday_pm)"
                      @change="formData.week_setting.sunday_pm == 1 ? formData.week_setting.sunday_pm=0:formData.week_setting.sunday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Monday" :value="Boolean(formData.week_setting.Monday)"
                      @change="formData.week_setting.Monday == 1 ? formData.week_setting.Monday=0:formData.week_setting.Monday=1">
                      {{$t('attendance.mon')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="monday_pm" :value="Boolean(formData.week_setting.monday_pm)"
                      @change="formData.week_setting.monday_pm == 1 ? formData.week_setting.monday_pm=0:formData.week_setting.monday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Tuesday" :value="Boolean(formData.week_setting.Tuesday)"
                      @change="formData.week_setting.Tuesday == 1 ? formData.week_setting.Tuesday=0:formData.week_setting.Tuesday=1">
                      {{$t('attendance.tue')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="tuesday_pm" :value="Boolean(formData.week_setting.tuesday_pm)"
                      @change="formData.week_setting.tuesday_pm == 1 ? formData.week_setting.tuesday_pm=0:formData.week_setting.tuesday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Wednesday" :value="Boolean(formData.week_setting.Wednesday)"
                      @change="formData.week_setting.Wednesday == 1 ? formData.week_setting.Wednesday=0:formData.week_setting.Wednesday=1">
                      {{$t('attendance.wed')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="wednesday_pm" :value="Boolean(formData.week_setting.wednesday_pm)"
                      @change="formData.week_setting.wednesday_pm == 1 ? formData.week_setting.wednesday_pm=0:formData.week_setting.wednesday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Tednesday" :value="Boolean(formData.week_setting.Tednesday)"
                      @change="formData.week_setting.Tednesday == 1 ? formData.week_setting.Tednesday=0:formData.week_setting.Tednesday=1">
                      {{$t('attendance.thur')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="thursday_pm" :value="Boolean(formData.week_setting.thursday_pm)"
                      @change="formData.week_setting.thursday_pm == 1 ? formData.week_setting.thursday_pm=0:formData.week_setting.thursday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Friday" :value="Boolean(formData.week_setting.Friday)"
                      @change="formData.week_setting.Friday == 1 ? formData.week_setting.Friday=0:formData.week_setting.Friday=1">
                      {{$t('attendance.fir')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="friday_pm" :value="Boolean(formData.week_setting.friday_pm)"
                      @change="formData.week_setting.friday_pm == 1 ? formData.week_setting.friday_pm=0:formData.week_setting.friday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
              <el-col :span="3">
                <ul>
                  <li>
                    <el-checkbox label="Saturday" :value="Boolean(formData.week_setting.Saturday)"
                      @change="formData.week_setting.Saturday == 1 ? formData.week_setting.Saturday=0:formData.week_setting.Saturday=1">
                      {{$t('attendance.sat')}}
                    </el-checkbox>
                  </li>
                  <!-- <li>
                    <el-checkbox label="saturday_pm" :value="Boolean(formData.week_setting.saturday_pm)"
                      @change="formData.week_setting.saturday_pm == 1 ? formData.week_setting.saturday_pm=0:formData.week_setting.saturday_pm=1">{{$t('attendance.pm')}}
                    </el-checkbox>
                  </li> -->
                </ul>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-form-item align="right">
          <el-button size="small" @click="closeDia()">{{$t('table.cancel')}}</el-button>
          <el-button type="primary" size="small" @click="submitForm()">{{$t('table.complete')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import {
  get_schedule_info,
  get_period_list,
  get_weekly_info,
  edit_period,
  edit_weekly,
  edit_schedule,
  add_period,
  delete_period,
} from "@/api/attendance_management/attendanceShift";

export default {
  props: {
    row_id: {
      type: Number,
      default: function () {
        return null;
      },
    },
  },
  data() {
    return {
      loading: true,
      num: 0,
      dialogTableVisible: false,
      listLoading: false,
      update: true,
      time_item: {
        name: null,
        schedule_id: null,
        start_time: null,
        shift_start_time: null,
        shift_end_time: null,
        end_time: 0,
        need_clock_on: 0,
        need_clock_off: 0,
        late_log: 0,
        leave_early_log: 0,
      },
      delPeriodList: [],
      formData: {
        schedule_setting: {},
        week_setting: {},
        period_setting: [],
        // 这边有个undefined的报错，但是如果给他定义上的话，显示会出问题，所以那个报错不管它
        // week_setting:{
        //   sunday_am:0,
        //   sunday_pm:0,
        //   monday_am:0,
        //   monday_pm:0,
        //   tuesday_am:0,
        //   tuesday_pm:0,
        //   wednesday_am:0,
        //   wednesday_pm:0,
        //   thursday_am:0,
        //   thursday_pm:0,
        //   friday_am:0,
        //   friday_pm:0,
        //   saturday_am:0,
        //   saturday_pm:0
        // }
      },
      rules: {
        name: [{ required: true, message: "请输入班次名称", trigger: "blur" }],
      },
      week: [],
    };
  },
  methods: {
    openEdit(id) {
      this.dialogTableVisible = true;
      this.loading = true;
      let p1 = get_schedule_info(store.getters.token, {
        schedule_id: this.row_id,
      });
      let p2 = get_period_list(store.getters.token, {
        schedule_id: this.row_id,
      });
      let p3 = get_weekly_info(store.getters.token, {
        schedule_id: this.row_id,
      });
      Promise.all([p1, p2, p3]).then((res) => {
        // 根据id获取班次、迟到信息
        this.formData.schedule_setting = res[0].data.data;
        console.log(this.formData.schedule_setting, "get_schedule_info");

        // 根据id获取时段信息
        this.time_item.schedule_id = this.formData.schedule_setting.schedule_id;
        this.formData.period_setting = res[1].data.list;
        console.log(this.formData.period_setting, "get_period_info");

        // 根据id获取周末信息
        this.formData.week_setting = res[2].data.data;
        console.log(this.formData.week_setting, "get_week_setting_info");

        this.loading = false;
      });
      console.log(this.formData, "formData");
    },

    // // 根据id获取班次、迟到信息
    // get_schedule_infos() {
    //   get_schedule_info(store.getters.token, { schedule_id: this.row_id }).then(
    //     (res) => {
    //       this.formData.schedule_setting = res.data.data;
    //       console.log(this.formData.schedule_setting, "get_schedule_info");
    //       this.listLoading = false;
    //     }
    //   );
    // },
    // // 根据id获取时段信息
    // get_period_lists() {
    //   get_period_list(store.getters.token, { schedule_id: this.row_id }).then(
    //     (res) => {
    //       this.formData.period_setting = res.data.list;
    //       console.log(this.formData.period_setting, "get_period_info");
    //       this.listLoading = false;
    //     }
    //   );
    // },
    // // 根据id获取周末信息
    // get_weekly_infos() {
    //   get_weekly_info(store.getters.token, { schedule_id: this.row_id }).then(
    //     (res) => {
    //       this.formData.week_setting = res.data.data;
    //       console.log(this.formData.week_setting, "get_week_setting_info");
    //       this.listLoading = false;
    //     }
    //   );
    // },
    submitForm() {
      this.$refs.formData.validate((valid) => {
        if (!valid) {
          return;
        } else {
          Promise.all([
            edit_schedule(store.getters.token, this.formData.schedule_setting),
            edit_weekly(store.getters.token, this.formData.week_setting),
          ]).then((res) => {
            let res_msg = null;
            for (let item of res) {
              if (!item.data.status) {
                res_msg = item;
                console.log(res_msg, "res_msg");
                break;
              }
            }
            if (res_msg && res_msg.data.status == false) {
              this.$message.error(this.$t("table.edit_fail"));
            } else {
              this.$message.success(this.$t("table.edit_complete"));
              this.$emit("getLists");
            }
            this.delPeriodList.forEach((item) => {
              delete_period(store.getters.token, { id: item }).then((res) => {
                console.log("删除成功");
              });
            });
            for (let i = 0; i < this.formData.period_setting.length; i++) {
              if (this.formData.period_setting[i].id) {
                edit_period(
                  store.getters.token,
                  this.formData.period_setting[i]
                );
              } else {
                add_period(
                  store.getters.token,
                  this.formData.period_setting[i]
                );
              }
            }
          });
          this.dialogTableVisible = false;
        }
      });
    },
    // 关闭弹窗
    closeDia() {
      this.dialogTableVisible = false;
    },
    // 新增时段
    addTimePeriod() {
      let time_item = JSON.parse(JSON.stringify(this.time_item));
      this.formData.period_setting.push(time_item);
    },
    // 删除时段
    deleteTimePeriod(index) {
      if (this.formData.period_setting[index].id) {
        this.delPeriodList.push(this.formData.period_setting[index].id);
        console.log(this.delPeriodList, "PPPPPPPPP");
      }
      this.formData.period_setting.splice(index, 1);
      // 这里删除后会导致页面渲染不正确，使用v-if进行局部的强制刷新
      this.update = false;
      this.$nextTick(() => {
        this.update = true;
      });
    },
  },
};
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
  display: block;
  list-style: none;
}
.box-card {
  margin-bottom: 5px;
}
</style>